<!DOCTYPE html>
<html class="x-admin-sm">
    <head>
        <meta charset="UTF-8">
        <title>欢迎页面-X-admin2.2</title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
        <link rel="stylesheet" href="./css/font.css">
        <link rel="stylesheet" href="./css/xadmin.css">
		<link rel="stylesheet" href="css/tooltip.css" />
		<link rel="stylesheet" href="js/Cesium/Widgets/widgets.css" />
        <script src="./lib/layui/layui.js" charset="utf-8"></script>
        <script type="text/javascript" src="./js/xadmin.js"></script>
		<script src="js/Cesium/Cesium.js"></script>
		<script src="js/Cesiumtool/viewerCesiumNavigationMixin.js"></script>
		<script src="js/Cesiumtool/GlobeTooltip.js"></script>
        <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
        <!--[if lt IE 9]>
          <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
          <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
		<style>
			html,body{
				margin: 0;
				padding: 0;
				height: 100%;
				width: 100%;
			}
			#contanter{
				width:100%;
				height:100%
			}    
			/* 去除logo信息 */	
			.cesium-widget-credits{ 
				display:none!important; 
				visibility:hide!important; 
			} 
			/* 导航条的位置 */
			.compass{
				left:0px;
				top:20px
			}
			.navigation-controls{
				left:30px;
				top:110px
			}
			
			/* 添加点、线、面的按钮*/
			.addEntities{
				position: fixed;
				left: 110px;
				top: 10px;
				z-index: 99999;
			}
			.addEntities button{
				background-color: rgba(47,53,60,0.8);
				color: #FFFFFF;
				border: 0;
				padding: 5px 15px;
				border-radius: 5px;
			}
		</style>
    </head>
    <body>
		<div id="contanter"></div>
		
		<script>
			var viewer = new Cesium.Viewer("contanter",{
				animation: false,  //是否显示动画控件
	            baseLayerPicker: false, //是否显示图层选择控件
	            geocoder: true, //是否显示地名查找控件
	            timeline: false, //是否显示时间线控件
	            sceneModePicker: true, //是否显示投影方式控件
	            navigationHelpButton: false, //是否显示帮助信息控件
	            infoBox: true,  //是否显示点击要素之后显示的信息
				// 加载地形数据
				terrainProvider: new Cesium.CesiumTerrainProvider({
					url: Cesium.IonResource.fromAssetId(3956)
				})
            })
			// 开始深度监测
			this.viewer.scene.globe.depthTestAgainstTerrain = true
			viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK)

			var scene = viewer.scene;
			// 点集合
			var positions = []
			var isHeight = false
			drawPolygon()
			function drawPolygon(){
				// 创建鼠标事件
				var handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
				// 鼠标移动事件
				handler.setInputAction(function(movement) {
					 var newPosition = getPosition(movement.endPosition);	
					if(newPosition&&positions.length>0){
						positions.pop();
						positions.push(newPosition);
					}
				},Cesium.ScreenSpaceEventType.MOUSE_MOVE);
				// 左键
				handler.setInputAction(function(movement) {
					var position = getPosition(movement.position)
				    isHeight= true
					if(position){
						if(positions.length==0){
							positions.push(position)
							showPolygon(positions)
						}
						positions.push(position)
						// creatPoint(position)
					}	
				},Cesium.ScreenSpaceEventType.LEFT_CLICK);
				// 右键
				handler.setInputAction(function(movement) {
					handler.destroy();
					isHeight = false
					start()
					// tooltip.setVisible(false)
				},Cesium.ScreenSpaceEventType.RIGHT_CLICK);
			}
			
			
			// 获取鼠标点击的坐标信息
			function getPosition(position){
				// var wp = event.position;
				if (!Cesium.defined(position)) {
				    return;
				}
				var ray = viewer.camera.getPickRay(position);
				if (!Cesium.defined(ray)) {
				    return;
				}
				var cartesian = viewer.scene.globe.pick(ray, viewer.scene);
				if (!Cesium.defined(cartesian)) {
				    return;
				}else{
					var cartographic = Cesium.Cartographic.fromCartesian(cartesian);
					var lon = Cesium.Math.toDegrees(cartographic.longitude);
			        var lat = Cesium.Math.toDegrees(cartographic.latitude);
			        var position = [Cesium.Cartographic.fromDegrees(lon,lat)]
			        if(isHeight)
						getHeight(position)
				}
				return cartesian
			}
			
			// 动态绘制多边型
			function showPolygon(positions){
				var dynamicPositions = new Cesium.CallbackProperty(function () {
					if (positions.length > 2) {
						var pHierarchy = new Cesium.PolygonHierarchy(positions);
						return pHierarchy;
					} else {
						return null;
					}
				}, false);
				if(dynamicPositions)
					viewer.entities.add({
						polygon: {
							hierarchy: dynamicPositions,
							material: new Cesium.ColorMaterialProperty(Cesium.Color.WHITE.withAlpha(0.7))
						}
					});
			}
		    var height_max = 0
			var extrudedHeight = 1000
			var height_min = 1000
			var speed=20
			var frist = true
			// 获取指定位置的地形高度
			function getHeight(positions_){
				var terrainProvider = Cesium.createWorldTerrain();
				var promise = Cesium.sampleTerrainMostDetailed(terrainProvider, positions_);
				Cesium.when(promise, function(updatedPositions) {
					var height = updatedPositions[0].height
					if(frist){
						height_max = height
						height_min = height
						extrudedHeight =height
						frist = false
					}else{
						if(height>height_max)
							height_max = height
						if(height<height_min){
							height_min = height
							extrudedHeight = height
						}	
					}				
				});
			}
		    // 开始模拟淹没
			function start(){
				var timer = setInterval(() => {
					if ((height_max > extrudedHeight) && (extrudedHeight >= height_min)) {
						extrudedHeight = extrudedHeight + speed
					} else {
						extrudedHeight = height_min
					}
				}, 500)
				 _drawPoly(positions)	
			}
			var polygonEntities = []
			// 动态绘制多边形
			function _drawPoly(degrees) {
				var entity = viewer.entities.add({
					polygon: {
						hierarchy:  new Cesium.PolygonHierarchy(degrees),
						material:  new Cesium.Color.fromBytes(64, 157, 253, 100),
						perPositionHeight: true,
						extrudedHeight:extrudedHeight
					}
				});
				entity.polygon.extrudedHeight = new Cesium.CallbackProperty(() => {
					return extrudedHeight
				}, false)
				polygonEntities.push(entity)
			}
		
		  
		</script>
    </body>
</html>
